<!--
 * @Author: yuanming
 * @Date: 2024-06-30 08:01:12
 * @LastEditors: yuanming
 * @LastEditTime: 2024-09-12 17:53:50
 * @Description: fileDescription
-->
<template>
    <div class="dataMonitorWarp">
        <div class="topContent">
            <div class="left">
                <div class="leftPark">
                    <span>公共备案停车场</span>
                    <img src="@/assets/images/line.png" class="img" alt=""/>
                    <img src="@/assets/images/dot.png" class="dot" alt=""/>
                    <div class="lineBox bg1">
                        <div class="lineTitle">公共备案监督</div>
                        <div class="lineData">
                            <div class="label">公共备案停车场：</div>
                            <CountConponent :end-val="propsData.filingPark.parkCnt || 0" />
                        </div>
                        <div class="lineData">
                            <div class="label">总泊位数：</div>
                            <CountConponent :end-val="propsData.filingPark.totalCnt || 0" />
                        </div>
                        <div class="lineData">
                            <div class="label">实时余位数：</div>
                            <CountConponent :end-val="propsData.filingPark.freeNumCnt || 0" />
                        </div>
                    </div>
                </div>
                <div class="leftBike">
                    <span>共享单车</span>
                    <img src="@/assets/images/line.png" class="img" alt=""/>
                    <img src="@/assets/images/dot.png" class="dot" alt=""/>
                    <div class="lineBox bg2">
                        <div class="lineTitle">公共单车监管</div>
                        <div class="lineData">
                            <div class="label">美团单车：</div>
                            <CountConponent :end-val="propsData.sharedBicycles.meiTuan || 0" />
                        </div>
                        <div class="lineData">
                            <div class="label">青桔单车：</div>
                            <CountConponent :end-val="propsData.sharedBicycles.qingJu || 0" />
                        </div>
                        <div class="lineData">
                            <div class="label">哈啰单车：</div>
                            <CountConponent :end-val="propsData.sharedBicycles.haLuo || 0" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="minddle">
                <div class="batteryWarp">
                    <div class="title">雨花台平台</div>
                    <div class="battery bg1">
                        <div class="batteryTitle">公共备案停车场数据</div>
                        <div class="batteryNum">
                            <CountConponent :end-val="propsData.filingPark.dayReceiveTotalCnt || 0" />
                        </div>
                        <div class="batteryLabel">接收数据总量</div>
                    </div>
                    <div class="battery bg2">
                        <div class="batteryTitle">共享单车数据</div>
                        <div class="batteryNum">
                            <CountConponent :end-val="propsData.sharedBicycles.dayBikeReceiveTotalCnt || 0" />
                        </div>
                        <div class="batteryLabel">接收数据总量</div>
                    </div>
                </div>
                <img src="@/assets/images/greenLine.png" class="img" alt=""/>
                <img src="@/assets/images/dot.png" class="dot" alt=""/>
            </div>
            <div class="right flex-center">
                <div class="numWarp">
                    <div class="numTitle">市平台</div>
                    <div class="numSubTitle">公共备案停车场数据</div>
                    <div class="num">
                        <CountConponent :end-val="propsData.filingPark.dayPushTotalCnt || 0" />
                    </div>
                    <div class="numLabel">接收数据总量</div>
                </div>
            </div>
        </div>
        <div class="bottomNum">
            <div class="numItem">
                <div class="title">公共备案停车场总数</div>
                <div class="numContent1">
                    <div class="numStyle">
                        <CountConponent :end-val="propsData.filingPark.parkCnt || 0" :duration="5" />
                    </div>
                    <div class="unit">停车场总数</div>
                </div>
            </div>
            <div class="numItem">
                <div class="title">公共备案停车场总泊位数</div>
                <div class="numContent2">
                    <div class="numStyle">
                        <CountConponent :end-val="propsData.filingPark.totalCnt || 0" :duration="5" />
                    </div>
                    <div class="unit">总泊位数</div>
                </div>
            </div>
            <div class="numItem">
                <div class="title">共享单车接入数量</div>
                <div class="numContent3">
                    <div class="numStyle">
                        <CountConponent :end-val="propsData.filingPark.totalBikeNum || 0" :duration="5" />
                    </div>
                    <div class="unit">共享单车数量</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import CountConponent from '@/components/countToComponent/index.vue'

const propsData = defineProps({
    filingPark: {
        type: Object,
        default: () => {},
    },
    sharedBicycles: {
        type: Object,
        default: () => {},
    },
})
</script>

<style lang="scss" scoped>
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.dataMonitorWarp {
    width: 100vw;
    height: auto;
    min-height: 85vh;
    position: absolute;
    top: 10vh;
    left: 0;
    z-index: 100;

    .topContent {
        width: 100%;
        height: auto;
        display: flex;
        padding: 5vh 5vw 0vh 7vw;
        box-sizing: border-box;
        justify-content: space-between;
        position: relative;
        left: 1.6vw;
        .left {
            width: 25%;
            height: auto;
            display: flex;
            flex-direction: column;
            padding: 8vh 0;
            box-sizing: border-box;
            %commonStyle {
                width: 10vw;
                height: 22vh;
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                display: flex;
                justify-content: center;
                align-items: flex-end;
                font-size: 1vw;
                font-weight: 600;
                padding-bottom: 6vh;
                box-sizing: border-box;
                position: relative;
                .img {
                    width: 24vw;
                    height: auto;
                    position: absolute;
                    left: 8vw;
                    top: 10vh;
                }
                .dot {
                    width: 10vw;
                    height: 8vh;
                    position: absolute;
                    left: 3vw;
                    top: 6.3vh;
                    animation: moveX 5s infinite ease-out;
                }
                @keyframes moveX {
                    0% {
                        transform: translateX(0);
                    }
                    50% {
                        opacity: 1;
                    }
                    100% {
                        transform: translateX(23vw);
                        opacity: 0;
                    }
                }

                .lineBox {
                    width: 15vw;
                    height: 16vh;
                    background-size: 100% 100%;
                    background-position: center;
                    background-repeat: no-repeat;
                    position: absolute;
                    left: 11vw;
                    top: -6vh;
                    .lineTitle {
                        width: 100%;
                        height: 4.5vh;
                        line-height: 4.5vh;
                        padding-left: 3.5vw;
                        box-sizing: border-box
                    }
                    .lineData {
                        width: 100%;
                        height: auto;
                        padding-left: 2vw;
                        box-sizing: border-box;
                        margin-top: 0.5vh;
                        display: flex;
                        flex-direction: row;
                        .label {
                            color: #708DFF;
                        }
                    }
                }
                .bg1 {
                    background-image: url('@/assets/images/icon3.png');
                }
                .bg2 {
                    background-image: url('@/assets/images/icon4.png');
                }
            }
            .leftPark {
                @extend %commonStyle;
                background-image: url('@/assets/images/icon1.png');

            }
            .leftBike {
                @extend %commonStyle;
                background-image: url('@/assets/images/icon2.png');
            }
        }
        .minddle {
            width: 40%;
            height: auto;
            position: relative;
            .img {
                width: 12vw;
                height: auto;
                position: absolute;
                left: 86%;
                top: 45%;
            }
            .dot {
                width: 10vw;
                height: 8vh;
                position: absolute;
                right: 0;
                top: 38.8%;
                animation: moveLeftX 3s infinite ease-out;
            }
            @keyframes moveLeftX {
                0% {
                    transform: translateX(0);
                }
                50% {
                    opacity: 1;
                }
                100% {
                    transform: translateX(11vw);
                    opacity: 0;
                }
            }
            .batteryWarp {
                width: 70%;
                height: auto;
                margin: 0 auto;
                background-image: url('@/assets/images/icon5.png');
                padding: 4vh 0 6vh 0;
                box-sizing: border-box;
                background-size: 100% 100%;
                background-position: center;
                background-repeat: no-repeat;
                text-align: center;
                .title {
                    color: #96D8FE;
                    font-size: 1.5vw;
                    font-weight: 600;
                }
                .battery {
                    width: 55%;
                    height: 16vh;
                    margin: 0 auto;
                    background-size: 100% 100%;
                    background-position: center;
                    background-repeat: no-repeat;
                    margin-top: 4vh;
                    .batteryTitle {
                        font-size: 1.35vw;
                        font-weight: 800;
                        position: relative;
                        top: -2.6vh;
                    }
                    .batteryNum {
                        font-size: 2vw;
                        font-family: 'YouSheBiaoTiHei';
                        color: #ECFFF8;
                        position: relative;
                        top: -1vh;
                    }
                    .batteryLabel {
                        color: #fff;
                        font-size: 1vw;
                        margin-top: 1vh;
                    }
                }
                .bg1{
                    background-image: url('@/assets/images/icon6.png');
                }
                .bg2{
                    background-image: url('@/assets/images/icon7.png');
                }
            }
        }
        .right {
            width: 30%;
            height: auto;
            .numWarp {
                width: 70%;
                height: 42vh;
                background-image: url('@/assets/images/icon8.png');
                padding: 4vh 0;
                box-sizing: border-box;
                background-size: 100% 100%;
                background-position: center;
                background-repeat: no-repeat;
                display: flex;
                flex-direction: column;
                align-items: center;
                position: relative;
                left: 1vw;
                .numTitle {
                    font-size: 1.8vw;
                    font-family: 'YouSheBiaoTiHei';
                    color: #ABFEDF;
                    margin-top: 1vh;
                }
                .numSubTitle {
                    font-size: 1.4vw;
                    font-family: 'YouSheBiaoTiHei';
                    color: #6AECD4;
                    margin-top: 2vh;
                }
                .num {
                    font-size: 3vw;
                    font-family: 'YouSheBiaoTiHei';
                    color: #ECFFF8;
                    margin-top: 4vh;
                }
                .numLabel {
                    color: #7FFFF1;
                    margin-top: 3vh;
                }
            }
        }
    }
    .bottomNum {
        width: 80%;
        height: auto;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .numItem {
            width: 33%;
            height: 18vh;
            background-image: url('@/assets/images/icon9.png');
            background-size: 100% 200%;
            background-position: center;
            background-repeat: no-repeat;
            padding: 1vh 0 0 4vw;
            box-sizing: border-box;
            .title {
                width: 95%;
                height: auto;
                background-image: url('@/assets/images/icon10.png');
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
                font-size: 1.2vw;
                font-family: 'YouSheBiaoTiHei';
                color: #ffffff;
                padding: 1vh 1vw;
                box-sizing: border-box;
            }
            %commonNumContent {
                width: 115%;
                height: 12vh;
                background-size: contain;
                background-position: 20% 0;
                background-repeat: no-repeat;
                position: relative;
                bottom: 2vh;
                text-align: center;
                .numStyle {
                    color: white;
                    font-size: 2vw;
                    margin-top: 1vh;
                    position: relative;
                    bottom: -2vh;
                    font-weight: 600;
                }
                .unit {
                    position: relative;
                    bottom: -2vh;
                }
            }
            .numContent1 {
                @extend %commonNumContent;
                background-image: url('@/assets/images/icon11.png');
            }
            .numContent2 {
                @extend %commonNumContent;
                background-image: url('@/assets/images/icon13.png');
            }
            .numContent3 {
                @extend %commonNumContent;
                background-image: url('@/assets/images/icon12.png');
            }
        }
    }
}

</style>
